<template>
    <div>
        <el-row>
            <component :is="content"></component>
            <el-col :span="20">
        <el-form ref="form"  label-width="80px" class="warranty-form">
            <el-form-item>
                <el-button type="primary" @click="getAllInsurance" class="loginButton" style="float: right">保单理赔</el-button>
            </el-form-item>
            <h2 class="warranty-title">保单维护</h2>
            <h3 class="warranty-title">(根据输入的内容查询保单)</h3>
            <el-form-item label="投保人">
                <el-input v-model="clientName"></el-input>
            </el-form-item>
            <el-form-item label="保单日期">
                <el-date-picker
                        v-model="startDate"
                        type="date"
                        placeholder="起始日期"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="timestamp">
                </el-date-picker>
                <el-date-picker
                        v-model="endDate"
                        type="date"
                        placeholder="结束日期"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="timestamp">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="险种">
                <el-select v-model="insuranceType" placeholder="请选择">
                    <el-option
                            v-for="item in option"
                            :key="item.insuranceType"
                            :label="item.label"
                            :value="item.insuranceType">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="签单人" >
                <el-input v-model="userName"></el-input>
            </el-form-item>

            <el-form-item label="保单状态">
                <el-select v-model="status" placeholder="请选择">
                    <el-option
                            v-for="item in option1"
                            :key="item.status"
                            :label="item.label"
                            :value="item.status">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="selectWarranty" class="loginButton">查询</el-button>
            </el-form-item>
        </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import NavMenu from "../components/NavMenu";
    export default {
        name: "WarrantyMaintain",
        data(){
            return{
                content:NavMenu,
                clientName:'',
                userName:'',
                insuranceStatus:'',
                startDate:'',
                endDate:'',
                status:'',
                insuranceType:'',
                option1: [{
                    status: '生效中',
                    label: '生效中'
                }, {
                    status: '过期',
                    label: '过期'
                }, {
                    status: '理赔中',
                    label: '理赔中'
                }],
                option: [{
                    status: '',
                    label: ''
                }, {
                    status: '',
                    label: ''
                }, {
                    status: '',
                    label: ''
                }],
            }
        },
        methods:{
            getAllInsurance(){
                this.$axios.get("api/getAllInsurance").then(
                    r=>{
                        console.log(r.data)
                    }
                )
            },
            selectWarranty(){
                this.$axios.get("api/selectWarranty/"+this.clientName+"/"
                    +this.startDate+"/"
                    +this.endDate+"/"
                    +this.insuranceType+"/"
                    +this.userName+"/"
                    +this.insuranceStatus).then(

                )
            }
    }
    }
</script>

<style scoped>
    .warranty-form {
        width: 350px;
        margin:  auto; /* 上下间距160px，左右自动居中*/
        background-color: rgb(255, 255, 255); /* 透明背景色 */
        padding: 30px;
        border-radius: 20px; /* 圆角 */
    }
    .warranty-title {
        color: #303133;
        text-align: center;
    }
    .warrantyButton{
        align:center;
        width: 270px;
    }
</style>